import React, { useState, useEffect, forwardRef } from 'react';
import { Table, Button, Modal, Flex } from 'antd';
import type { TableColumnsType, TableProps } from 'antd';
import { getGoodsBrandList, editGoodsBrand, delGoodsBrand, searchGoodsBrand } from '../../../request/api'
import { useDispatch, useSelector } from 'react-redux';
import './brand.css'
import { setIsGoodsBrand, setIsGoodsType, setStoreList, setTableCheck } from '../../../store/module/store';


const App: React.FC = (props, ref) => {
  const dispatch = useDispatch()
  let is_goods_brand = useSelector((state: any) => state.storeList.is_goods_brand)
  let goods_brand_look = useSelector((state: any) => state.storeList.goods_brand_look)
  interface DataType {
    name: String, //品牌名称
    Inglist_name: String, //英文名称
    statue: Boolean, //是否为品牌
  }


  const columns: TableColumnsType<DataType> = [
    { title: '品牌名称', dataIndex: 'name', },
    { title: '英文名称', dataIndex: 'Inglist_name', },
    {
      title: '状态', dataIndex: '',
      render: (text: any) => <span>{text.statue === true ? '正常' : '禁用'}</span>
    },
    {
      title: '操作', dataIndex: '',
      render: (text: any) =>
        <p>
          <a onClick={() => { showModal(text) }}>编辑 </a>
          <a onClick={() => { del_brand(text.key) }}>删除 </a>
        </p>,
    },
  ];

  const [typeList, setTypeList] = useState([])

  useEffect(() => {
    get_group();
  }, [is_goods_brand])

  //获取分组列表  品牌
  const get_group = async () => {

    if (goods_brand_look) {
      let res = await searchGoodsBrand({ goods_brand_look: goods_brand_look })
      setTypeList(res.list)
    } else {
      let res = await getGoodsBrandList({})
      setTypeList(res.list)
    }
  }

  const dataSource = typeList.map((item: any) => ({
    key: item._id,
    name: item.name,//品牌名称
    Inglist_name: item.Inglist_name,//英文名称
    statue: item.statue,//是否为品牌
  }))


  //修改类别
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [box, setBox] = useState<any>({})
  const [ID, setID] = useState('')
  //展示
  const showModal = (box: any) => {
    setIsModalOpen(true);
    setID(box.key)
    setBox(box)
    setName(box.name)
    setInglist_name(box.Inglist_name)
    setStatue(box.statue)
  };

  //确定
  const handleOk = () => {
    setIsModalOpen(false);
    up_brand();
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  //修改
  const [name, setName] = useState('')
  const [Inglist_name, setInglist_name] = useState('')
  const [statue, setStatue] = useState(true)

  const up_brand = async () => {
    let res = await editGoodsBrand({ _id: ID, name, Inglist_name, statue: statue })
    if (res.code === 200) {
      dispatch(setIsGoodsBrand())
    }
  }

  //删除
  const del_brand = async (id: any) => {
    let res = await delGoodsBrand({ _id: id })
    if (res.code === 200) {
      dispatch(setIsGoodsBrand())
    }
  }


  return (
    <div>
      <Table<DataType>
        columns={columns}
        dataSource={dataSource}
        pagination={{
          pageSize: 6,
          showQuickJumper: true,
          position: ['bottomLeft']
        }}
      />
      <div>
        <Modal title="编辑品牌" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}
          footer={[
            <Button key="back" onClick={handleCancel}>取消</Button>,
            <Button key="submit" type="primary" onClick={handleOk}>确定</Button>,
          ]}
        >
          <div className='classificationBox'>
            <p><span>分类名称</span><input type="text" placeholder='请输入品牌名称' value={name} onChange={(e) => setName(e.target.value)} /></p>
            <p><span>分类佣金</span><input type="text" placeholder='请输入英文名称' value={Inglist_name} onChange={(e) => setInglist_name(e.target.value)} />百分比%</p>
            <p>
              <span>分类名称</span>
              <button style={{
                backgroundColor: 'white',
                padding: '0.15rem 0.3rem',
                margin: '00.2rem 0.2rem',
                color: statue ? 'red' : '',
                border: statue ? '1px solid red' : '1px solid black'
              }}
                onClick={() => {
                  setStatue(true)
                }}
              >启用</button>
              <button style={{
                backgroundColor: 'white',
                padding: '0.15rem 0.3rem',
                margin: '00.2rem 0.2rem',
                color: statue ? '' : 'red',
                border: statue ? '1px solid black' : '1px solid red'
              }}
                onClick={() => {
                  setStatue(false)
                }}
              >禁用</button>
            </p>
          </div>
        </Modal>
      </div>
    </div >
  );
};

export default App;

